<template>
	<view class="install-container" style="margin-bottom: 30rpx;">
	
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item label="楼栋编号：" name="楼栋编号">
				<input maxlength="50" placeholder="请输入分区编号" v-model="params['楼栋编号']">
			</uni-forms-item>
			<uni-forms-item required label="楼栋号：" name="楼栋号">
				<input maxlength="18" v-model="params['楼栋号']" placeholder="请输入楼栋号" @input="binddata('分区名称',$event.detail.value)" >
			</uni-forms-item>
			<uni-forms-item>
				<facility-info :hydrantList="hydrantList" 
					:annihilatorList="annihilatorList"
					:smokeList="smokeList"
					:gasTankList="gasTankList" 
					:temperateList="temperateList"
					:hydrantLength="hydrantLength"
					:annihilatorLength="annihilatorLength"
					:smokeLength="smokeLength"
					:gasTankLength="gasTankLength" 
					:temperateLength="temperateLength" @more="goMoreInstall" @edit="goEdit" @delete="onDelete" :installList="installList" @add="goAddInstall"></facility-info>
			</uni-forms-item>
			<button class="grid-btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import FacilityInfo from '../components/facilityInfo.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			LbPicker,
			DatePicker,
			FacilityInfo
		},
		data() {
			return {
				hydrantList: [],
				hydrantLength: 0,
				annihilatorList: [],
				annihilatorLength: 0,
				smokeList: [],
				smokeLength: 0,
				temperateList: [],
				temperateLength: 0,
				gasTankList: [],
				gasTankLength: 0,
				name: null,
				params2: {
					楼栋id: null
				},
				installList: [],
				params: {
					检查点id	: null,
					楼栋号: null,
					楼栋编号: null
				},
				params1: {
					检查点id: null,
					楼栋号id: null
				},
				//表单验证规则
				rules: {
					分区名称: {
						rules: [{
							required: true,
							errorMessage: '请填写分区名称',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			console.log(options)
			this.params = JSON.parse(options.item)
			this.params1.楼栋号id = this.params.楼栋id
			this.params2.楼栋id = this.params.楼栋id
			this.checkId = +options.id
			this.name = options.name
			// console.log(options)
			// this.params.检查点名称 = options.name
		},
		onShow() {
			// this.getBuildInfo()
			this.getInstallList()
		},
		methods: {
			goMoreInstall() {
				uni.navigateTo({
					url: '/fireGridCheck/installationList/installationList?buildId=' + this.params.楼栋id + '&name=' + this.name + '&id=' + this.checkId
				})
			},
			goAddInstall() {
				uni.navigateTo({
					url: '/fireGridCheck/createInstallation/createInstallation?id=' + this.checkId + '&buildId=' + this.params.楼栋id + '&name=' + this.name
				})
			},
			goEdit(id) {
				uni.navigateTo({
					url: '/fireGridCheck/installtionDetail/installtionDetail?id=' + id + '&buildId=' + this.params.楼栋id
				})
			},
			onDelete(id) {
				this.$common.showModal('确定要删除该设施吗', this.deleteInstall, [id])
			},
			deleteInstall(id) {
				this.$http.post('gridSystem/device/delete', {
					id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getInstallList()
					}
				})
			},
			getInstallList() {
				this.$http.post('gridSystem/device/listWithoutAuth', this.params1).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.installList = res.data.list
						if(res.data.list !== null) {
							this.hydrantList = res.data.list.filter(item => item.设施类型 === 'hydrant')
							this.annihilatorList = res.data.list.filter(item => item.设施类型 === 'annihilator')
							this.smokeList = res.data.list.filter(item => item.设施类型 === 'smokeDetector')
							this.temperateList = res.data.list.filter(item => item.设施类型 === 'temperatureDetector')
							this.gasTankList = res.data.list.filter(item => item.设施类型 === 'gasTank')
							this.hydrantLength = res.data.list.filter(item => item.设施类型 === 'hydrant').length
							this.annihilatorLength = res.data.list.filter(item => item.设施类型 === 'annihilator').length
							this.smokeLength = res.data.list.filter(item => item.设施类型 === 'smokeDetector').length
							this.temperateLength = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
							this.gasTankLength = res.data.list.filter(item => item.设施类型 === 'gasTank').length
						    return 
						}
							this.hydrantList = []
							this.annihilatorList = []
							this.smokeList = []
							this.temperateList = []
							this.gasTankList = []
							this.hydrantLength = 0
							this.annihilatorLength = 0
							this.smokeLength = 0
							this.temperateLength = 0
							this.gasTankLength = 0
					}
				})
			},
			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					// console.log('表单数据信息：', res);
					res.楼栋id = this.params.楼栋id
					this.editBuild(res)
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},	
			editBuild(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/building/update', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.showToast({
							title: '修改成功',
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.install-container {
		height: 100vh;
		background-color: #F8F8F8;
	}
	.color {
		color: #808080;
	}
	.tap {
		display: flex;
		align-items: center;
	}
</style>

